import React from 'react'
import { Layout, Menu, Icon } from 'antd';
import { Router, Route, Switch, Link} from 'dva/router';

const { Header, Sider, Content } = Layout;
import MenuCustom from './components/MenuCustom'
import LinkMana from './routes/LinkMana'
import ChartsMana from './routes/Charts/ChartsMana'
import Editor from './routes/CKEditor/Editor'
import Demo1 from './routes/Demo1/Demo1'
import Demo from './routes/CheckboxGroup/Demo'
import UploadDemo from './routes/Upload/UploadDemo'

import Menus from './routes/Menu'
import './Home.css'


class Home extends React.Component{
  state = {
      collapsed: false,
      menuKey:"",
    };
    toggle = () => {
      this.setState({
        collapsed: !this.state.collapsed,
      });
    }
    componentDidMount() {
      let pathname = this.props.location.pathname;
      let key = pathname.split("/");
      console.log(key[1],22)
      this.setState({
        menuKey:key[1]
      })
    }
    render() {
      return (
        <Layout style={{height:'100%',margin:'0'}}>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo" />
            <Menus />
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
            </Header>
            <Content style={{ margin: '24px 16px', padding: '24px 24px 0', background: '#fff'}}>
              <Route path="/LinkMana" component={LinkMana} />
              <Route path="/ChartsMana" component={ChartsMana} />
              <Route path="/Editor" component={Editor} />
              <Route path="/Demo1" component={Demo1} />
              <Route path="/Checkbox" component={Demo} />
              <Route path="/Upload" component={UploadDemo} />
              <Route path="/demo4" component={LinkMana} />
            </Content>
          </Layout>
        </Layout>
      );
    }
}

export default Home
